<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="inp" type="text"><button>验证</button>
    <span></span>
    <script>
        const btn = document.querySelector("button")
        const spa = document.querySelector("span")
        btn.onclick = function () {
            const phone = inp.value
            //验证手机号码 
            // const reg = /\d{11}/
            /* 
                第一位  以 1 开头
                第二位  3~9
                后面的  \d{9}
            */
            // const reg = /^1[3-9]\d{9}$/ //以1开头,第二位是3-9,后面的9为都是数字



            //验证身份证
            /* 
                总共的长度是18为
                    前面17为数字
                    后面一位为数字或者是x
            */
           // const reg = /^\d{17}(\d|x)$/
            
            //验证邮箱
            /* 
                xxx@xx.com
                   用户名   \w  3-16
                   @        @
                   xx       \w  2-5
                   .        \.
                   []组成   [a-z]{2,}

            */
            // const reg = /^\w{3,16}@\w{2,5}\.[a-z]{2,}$/
            const reg = /^\w{3,16}@\w{2,5}(\.[a-z]{2,})+$/
            if (reg.test(phone)) {
                spa.innerHTML = "验证通过!"
                spa.style.color = "green"
            } else {
                spa.innerHTML = "验证失败"
                spa.style.color = "red"
            }


        }
    </script>
</body>

</html>